import React, {Component} from 'react';
import {Accordion, List} from 'antd-mobile';
import {Link} from 'react-router-dom';
import { connect } from 'react-redux'
import './topNav.scss'
import '../../../static/css/icon.css';



class TopNav extends Component {
    componentWillMount() {
        //console.log(this.props.topnav.data)
    }

    render() {
        return (

            <div className='GlobeNav'>
                <ul>
                    <Link to='/'>
                        <li>
                            <div className='Tl_icon7 icon-coment'></div>
                            <span>首页</span>
                        </li>
                    </Link>
                    <li className='classFood'>
                        <span>商品分类</span>
                    </li>


                    <Accordion accordion defaultActiveKey="" className="my-accordion">
                        {this.props.topnav && this.props.topnav.map((item,key)=>
                        <Accordion.Panel header={item.navTitle} key = {key}>
                            <List className="my-list">
                                {item.navData.map((val,i)=>
                                <Link to={`/${val.navprops}?${val.navid}`} key={i}>
                                    <List.Item>{`${val.navName}`}</List.Item>
                                </Link>
                                )}
                            </List>
                        </Accordion.Panel>
                        )}
                    </Accordion>


                </ul>
            </div>

        )
    }
}
const mapStateToProps = (state) =>{
    console.log(state.publics.topnav);
    let topnav = state.publics.topnav;

    return {
        topnav
    }
}
export default connect(mapStateToProps)(TopNav)
